<template>
  <!-- index的头部组件，显示用户的信息 -->
  <div class="indexHeader">
    <el-header class="headerBG" ref="userForm" :model="userForm">
      <!-- 头像 -->
      <el-col :span="12">
        <div class="demo-basic--circle">
          <div
            class="block"
            style="margin-left: 100px; margin-top: 15px; margin-left: 170%"
          >
            <el-avatar :size="65" :src="userForm.imageIcon"></el-avatar>
          </div>
        </div>
      </el-col>
      <div
        style="
          margin-left: 100px;
          margin-top: 33px;
          margin-left: 90%;
          font-weight: bold;
        "
      >
        {{ userForm.userName }}
      </div>
    </el-header>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 用户数据
      userForm: {
        uid: '',
        userName: '用户XXX',
        password: '',
        imageIcon: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' // 用户头像地址
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-header {
  background-image: url(../assets/img/headerBG.png);
  // background-size: cover;

  height: 100px !important;
}
</style>
